@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <input id="adId" value="${item.adId}"  hidden>
            <input id="showTypeValue" value="${item.showType}"  hidden>
            <input id="adLocationValue" value="${item.adLocation}"  hidden>
            <div class="row">
                <div class="col-sm-12">
                    <div style="display: flex;flex-direction: row">
                        <h4 style="width: 120px;">广告名称</h4>
                        <input id="adName" style="width: 200px;height: 30px;" value="${item.adName}"/>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">广告位置</h4>
                        <select id="adLocation">
                            <option value="1">首页Banner</option>
                            <option value="2">启动页</option>
                            <option value="3">首页全屏弹窗</option>
                        </select>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">生效时间</h4>
                        <input id="startTime"  value="${item.startTime}"  placeholder="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">失效时间</h4>
                        <input id="endTime"  value="${item.endTime}"  placeholder="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">展示人群</h4>
                        <div>
                            <p><input name="showType" type="checkbox" value="0">免费</p>
                            <p><input name="showType" type="checkbox" value="1">VIP</p>
                            <p><input name="showType" type="checkbox" value="2">专属线路</p>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">跳转链接</h4>
                        <p><input id="jumpUrl" value="${item.jumpUrl}" style="width: 240px"/>为空时，将无跳转</p>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 10px;">
                        <h4 style="width: 120px;">广告图片</h4>
                        <input type="file" id="crowdImg">
                    </div>
                </div>
            </div>

            <div class="row btn-group-m-t">
                <div class="col-sm-10">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="VpnAdsManageDlg.updateAd()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="VpnAdsManageDlg.close()"/>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${ctxPath}/static/layui/layui.js" charset="utf-8"></script>
<script src="${ctxPath}/static/modular/vpn_ads_manage/vpnAdsManage_info.js"></script>
<script>
    $(function () {
        $("#adLocation").val($("#adLocationValue").val());
        //获得所要回显的值
        var showType = $("#showTypeValue").val();
        //拆分为字符串数组
        var checkArray = showType.split(",");
        //获得所有的复选框对象
        var checkBoxAll = $("input[name='showType']");

        for (var i = 0;i<checkArray.length;i++){
            $.each(checkBoxAll,function (j, checkbox) {
                var checkValue = $(checkbox).val();
                if (checkArray[i] == checkValue){
                    $(checkbox).attr("checked",true);
                }
            })
        }
    });
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startTime',
            type:'datetime'
        });
        laydate.render({
            elem: '#endTime',type:'datetime'
        });
    });
</script>
@}
